<template>
  <div>
    <div class="g-clickable widget empty" v-if="value === 'empty'">
      <svg class="icon" viewBox="0 0 1024 1024" width="200" height="200">
        <path
          d="M222.634667 272.298667A382.4 382.4 0 0 0 138.666667 512c0 212.117333 171.904 384 384 384 90.666667 0 174.016-31.424 239.701333-83.968l-539.733333-539.733333z m60.330666-60.330667l539.733334 539.733333A382.4 382.4 0 0 0 906.666667 512c0-212.117333-171.904-384-384-384-90.666667 0-174.016 31.424-239.701334 83.968zM53.333333 512c0-259.221333 210.090667-469.333333 469.333334-469.333333 259.221333 0 469.333333 210.090667 469.333333 469.333333 0 259.221333-210.090667 469.333333-469.333333 469.333333-259.221333 0-469.333333-210.090667-469.333334-469.333333z"
          fill="var(--color)"
        ></path>
      </svg>
    </div>
    <div
      class="g-clickable widget"
      :class="{ active: active, scale: scale !== 1 }"
      :ref="refs"
      v-else
      v-html="value"
    ></div>
  </div>
</template>

<script>
export default {
  props: {
    active: {
      type: Boolean,
      default: false,
    },
    value: {
      type: String,
      default: "",
    },
  },
  data() {
    return {
      scale: 1,
      refs: new Date().getTime() + "_" + Math.random().toString().substr(2),
    };
  },
  watch: {
    value() {
      this.change();
    },
  },
  mounted() {
    this.change();
    setTimeout(() => {
      this.change();
    }, 100);
  },
  methods: {
    change() {
      if (!this.value || this.value === "emtpy") return;
      this.$nextTick(() => {
        const { svg, g, x, y, width, height, svgWidth, svgHeight } =
          this.getEl();
        if (!g) return;
        const moveX = (svgWidth - width) / 2 - x;
        const moveY = (svgHeight - height) / 2 - y;
        if (height > svgHeight) return;
        const scaleX = svgWidth / width;
        const scaleY = svgHeight / height;
        const scale = scaleX < scaleY ? scaleX : scaleY;
        if (scale > 2.5) {
          const _svgWidth = Math.floor(svgWidth / scale);
          const _svgHeight = Math.floor(svgHeight / scale);
          svg.setAttribute("viewBox", `0 0 ${_svgWidth} ${_svgHeight}`);
          this.$nextTick(() => {
            this.reload();
          });
        } else {
          g.style.transform = `translate(${moveX}px,${moveY}px)`;
        }
      });
    },
    reload() {
      const { g, x, y, width, height, svgWidth, svgHeight } = this.getEl();
      if (!g) return;
      const moveX = (svgWidth - width) / 2 - x;
      const moveY = (svgHeight - height) / 2 - y;
      g.style.transform = `translate(${moveX}px,${moveY}px)`;
    },
    getEl() {
      const avatarEle = this.$refs[this.refs];
      if (!avatarEle) return {};
      const svg = avatarEle.childNodes[0];
      const g = svg.children[0];
      const { x, y, width, height } = g.getBBox();
      const viewBox = svg
        .getAttribute("viewBox")
        .replace(/^0\s+0\s+/gi, "")
        .split(/\s+/);
      const svgWidth = +viewBox[0];
      const svgHeight = +viewBox[1];
      return {
        svg,
        g,
        x,
        y,
        width,
        height,
        svgWidth,
        svgHeight,
      };
    },
  },
};
</script>

<style lang="scss">
.widget {
  width: 72px;
  height: 80px;
  border-radius: 12px;

  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;

  border: 1px dashed rgba(255, 255, 255, 0.05);

  &:hover {
    background-color: rgba(255, 255, 255, 0.1);
    /* background-color: #fff; */

    svg {
      transform: scale(1.25);
    }
  }

  &.empty {
    svg {
      width: 32px;
    }
  }

  &.active {
    background-color: #181b20;
    border-color: var(255, 255, 255, 0.15);
  }

  svg {
    width: 40px;
    height: 48px;
    transition: all 0.3s ease;
  }
}
</style>
